<template>
  <div id="home">
    <!-- 顶部导航 -->
    <nav-bar class="home-nav">
      <h3 slot="center">购物街</h3>
    </nav-bar>

    <!-- 选项卡栏1  先隐藏等滚动大对应位置后显示出来-->
    <tab-control
      :titles="['流行', '新款', '精选']"
      @tabClick="ChangeTab"
      ref="tabcontrol1"
      class="tabcontrol"
      v-show="isTabFixed"
    ></tab-control>

    <!-- 滚动部分 -->
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scrollPosition="contentScroll"
      @pullingUp="loadMoreGoods"
    >
      <!-- 轮播图组件 -->
      <HomeSwiper :banners="banners" @swiperImgLoad="swiperImgLoad" />
      <!-- 推荐组件 -->
      <home-recommend :recommends="recommends"></home-recommend>
      <!--  本周流行组件-->
      <home-feature></home-feature>
      <!-- 选项卡栏2 随着内容滚动消失 -->
      <tab-control
        :titles="['流行', '新款', '精选']"
        @tabClick="ChangeTab"
        ref="tabcontrol2"
      ></tab-control>

      <!-- 选项卡商品列表 -->
      <goods-list :goods="showGoods"></goods-list>
    </scroll>

    <!-- 返回顶部按钮 -->
    <back-top @click.native="backTop" v-show="isShowBack"></back-top>
  </div>
</template>

<script>
//导入获取首页数据请求函数
import { getHomeMultidata, getHomeGood } from "network/home/home";
//导入home所独有的子组件
import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommend from "./childComps/HomeRecommend";
import HomeFeature from "./childComps/HomeFeature";
// 导入公共组件
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabcontrol/TabControl";
import GoodsList from "components/content/goods/GoodsList";
import Scroll from "components/common/scroll/Scroll";
// 导入mixin混入对象
import { backTopMixin } from "common/mixin";

export default {
  name: "Home",
  // 使用混入mixin
  mixins: [backTopMixin],
  components: {
    HomeSwiper,
    HomeRecommend,
    HomeFeature,
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
  },

  data() {
    return {
      banners: [], //轮播图数据
      recommends: [], //推荐数据
      goods: {
        //商品列表数据
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] },
      },
      goodsCurrentType: "pop", //用于tab栏切换 展示对应的数据
      isShowBack: false, //用于返回顶部按钮的显示或隐藏
      tabOffSeTop: 0, //用于存储tab选项卡的offsetTop值
      isTabFixed: false, //决定tab选项卡是否吸顶
      saveY: 0,
    };
  },

  computed: {
    showGoods() {
      return this.goods[this.goodsCurrentType].list;
    },
  },

  // 生命周期函数 当首页组件创建完后 发送网络请求
  created() {
    // 1 发送网络请求 获取到轮播图和推荐数据
    this.getHomeMultidatas();

    // 2 请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("sell");
    this.getHomeGoods("new");
  },

  activated() {
    //被 keep-alive 缓存的组件激活时调用 再次进入home界面 把保存的y值赋值给滚动函数
    this.$refs.scroll.scrollTo(0, this.saveY);
    // console.log(this.saveY);
  },
  deactivated() {
    //被 keep-alive 缓存的组件停用时调用。 离开home界面时保存此时的y值
    this.saveY = this.$refs.scroll.getScrollY;
    // console.log(this.saveY);
  },

  methods: {
    /*
    事件监听相关的方法
    */

    //返回顶部事件(使用了mixin混入)
    // backTop() {},

    // 监听内容滚动的位置
    contentScroll(position) {
      // console.log(position);
      // 1 显示或隐藏返回顶部按钮事件
      this.isShowBack = -position.y > 1000;

      // 2 根据滚动的位置 决定tab选项卡 是否具有吸顶效果
      this.isTabFixed = -position.y > this.tabOffSeTop;
    },

    //切换tab栏选项卡事件
    ChangeTab(index) {
      // console.log(index);
      if (index === 0) {
        this.goodsCurrentType = "pop";
      } else if (index === 1) {
        this.goodsCurrentType = "new";
      } else {
        this.goodsCurrentType = "sell";
      }
      this.$refs.tabcontrol1.currentIndex = index;
      this.$refs.tabcontrol2.currentIndex = index;
    },

    // 监听swiper图片是否加载完成 完成后获取tab选项卡2的offsetTop值
    swiperImgLoad() {
      // console.log(this.$refs.tabcontrol.offsetTop);  组件没有offsetTop属性
      // 需要拿到组件里的元素
      // console.log(this.$refs.tabcontrol.$el.offsetTop);
      this.tabOffSeTop = this.$refs.tabcontrol2.$el.offsetTop;
    },

    // 上拉加载更多数据  当前在哪个tab选项卡下就加载哪个更多的数据
    loadMoreGoods() {
      this.getHomeGoods(this.goodsCurrentType);
      this.$refs.scroll.scroll.finishPullUp();
    },

    /**
    网络请求相关的方法
    **/
    //! 把处理网络请求数据的具体代码 写到methods中 created()中只写主要的请求逻辑
    getHomeMultidatas() {
      // 1 获取到轮播图和推荐数据
      getHomeMultidata().then((res) => {
        // console.log(res);
        // 把获取到的，需要的数据，保存起来
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },

    //!  请求商品数据 封装一个函数 一打开首页就请求第一页的数据，上拉加载更多再将参数page加1 重新调用函数
    getHomeGoods(type) {
      // * godds[type] 用[]可以访问变量，传参，加表达式， 不会创建新的属性，
      // *而用goods.type会创建新的属性或方法  对于已经存在的属性或方法[]和 . 得到的结果一致
      const page = this.goods[type].page;
      getHomeGood(type, page).then((res) => {
        // 利用扩展运算符将获取到的数据（是一个数组）放到goods的数组里
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1; //将参数page加1 下次请求下一页的数据
      });
    },
  },
};
</script>

<style scoped>
#home {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
}
.home-nav {
  position: relative;
  z-index: 9;
  background: var(--color-tint);
  color: #fff;
}
.content {
  position: fixed;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
  overflow: hidden;
}
.tabcontrol {
  position: relative;
  z-index: 9;
}
</style>
